<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            padding: 0;margin: 0;background-color: #000;
        }
        #can1{position: absolute;top:0;left:0;z-index:1}
        #can2{position: absolute;top:0;left:0;z-index:2}
        #can3{position: absolute;top:0;left:0;z-index:3}
    </style>
</head>
<body>
    <canvas id="can1"></canvas>
    <canvas id="can2"></canvas>
    <canvas id="can3"></canvas>
</body>
    <script type="text/javascript" src="js/common.js"></script>
     <script type="text/javascript" src="js/main.js"></script>  
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.gradientify.min.js"></script>     
     <script>
	$(document).ready(function() {
		$("#can1").gradientify({
			gradients: [
				//  { start: [49,76,172], stop: [242,159,191] },
				{ start: [242,159,191], stop:  [242,159,191]},
				{ start: [255,103,69], stop: [240,154,241] },
				{ start: [33,229,241], stop: [235,236,117] }
			],
			angle:'-90deg',
			fps:120,
			transition_time:16
		});
	});
</script> 
</html>